<template>
  <div class="flex overflow-hidden flex-col">
    <article class="bg-white">
      <header class="flex flex-shrink flex-grow h-20">
        <!-- 左边组件 -->
        <section
          class="
            flex flex-shrink flex-wrap
            content-start
            justify-between
            w-48
          "
        >
          <div class="">
            <div class="color-block bg-green shadow-lg-green"></div>
            <span class="align-middle font-medium">已安装</span>
          </div>
          <div class="">
            <div class="color-block bg-gray-300 shadow-lg-gray"></div>
            <span class="align-middle font-medium">未安装</span>
          </div>
          <div class="mt-6">
            <div class="color-block bg-orange shadow-lg-orange"></div>
            <span class="align-middle font-medium">有更新</span>
          </div>
          <div class="mt-6">
            <div class="color-block bg-red-500 shadow-lg-red"></div>
            <span class="align-middle font-medium">已废弃</span>
          </div>
        </section>
        <!-- 右边组件 -->
        <section
          class="
            flex
            justify-items-stretch
            flex-grow
            pl-5
            items-stretch
            flex-col
          "
        >
          <!-- 搜索框 -->
          <div class="h-2/4">
            <search-bar></search-bar>
          </div>
          <!-- 下半部分 -->
          <div class="h-2/4 flex mt-3 items-stretch">
            <!-- 下拉菜单 -->
            <drop-down-menu></drop-down-menu>
            <!-- 控制按钮 -->
            <div
              class="flex-grow flex-shrink flex justify-evenly items-stretch"
            >
              <div>
                <button
                  class="
                    px-3
                    rounded-2xl
                    border
                    w-full
                    outline-none
                    focus:outline-none
                    shadow-md
                    h-full
                  "
                >
                  新 建
                </button>
              </div>
              <div>
                <button
                  class="
                    px-3
                    rounded-2xl
                    border
                    w-full
                    shadow-md
                    focus:outline-none
                    h-full
                  "
                >
                  删 除
                </button>
              </div>
            </div>
          </div>
        </section>
      </header>
      <!--    表格 -->
    </article>
    <tables :ModStruct="Mods"></tables>
    <!-- <div class="h-24 shadow-lg"></div> -->
  </div>
</template>

<script>
// @ is an alias to /src
import { ipcRenderer } from "electron";
import { ref, watchEffect } from "vue";
import SearchBar from "@/components/SearchBar.vue";
import DropDownMenu from "@/components/DropDownMenu.vue";
import Tables from "@/components/Tables.vue";
export default {
  name: "Home",
  components: {
    SearchBar,
    DropDownMenu,
    Tables,
  },
  setup() {
    let MapObject = ref(null);
    let Mods = ref([]);
    watchEffect(() => {
      console.log(MapObject.value);
    });
    ipcRenderer.invoke("obtainModObjects").then((value) => {
      MapObject.value = value;
      if (MapObject.value) {
        for (let item of MapObject.value) {
          Mods.value.push(item[1]);
        }
      }
    });

    return {
      Mods,
    };
  },
};
</script>

